<template>
    <div class="bg-white flex flex-col p-4 my-16">
        <div class="flex items-center justify-between">
            <div class="Serif-Bolder text-4xl bg-white p-4 m-2 rounded-xl">
                {{ title }}
            </div>
            <div class="flex">
                <g-icon class="w-10 h-10 text-3xl" @click.native="$emit('edit')"
                    >edit</g-icon
                >
                <g-icon
                    class="w-10 h-10 text-4xl"
                    @click.native="$emit('close')"
                    >close</g-icon
                >
            </div>
        </div>
        <hr />
        <div class="flex p-4 flex-grow overflow-y-hidden">
            <VueShowdown
                class="
                    flex-grow
                    bg-white
                    rounded-xl
                    p-4
                    w-1/2
                    Markdown
                    overflow-y-scroll
                "
                :markdown="markdown"
            />
            <code-shower
                class="w-1/2"
                :language="codeLanguage"
                :code="code"
            ></code-shower>
        </div>
    </div>
</template>

<script>
import codeShower from "@/components/codeShower.vue";

export default {
    components: {
        codeShower,
    },
    props: ["code", "markdown", "codeLanguage", "title", "show"],
};
</script>

<style lang="less" scoped>
.el-input {
    background-color: transparent;
    border-radius: 10rem;
    /deep/ input {
        border-radius: 10rem;
        text-align: center;
    }
}
.search-cell {
    height: fit-content;
}
::-webkit-scrollbar {
    height: 0;
    width: 0;
}
.Btn {
    @apply text-3xl mx-2 w-10 h-10 bg-green-400 text-white flex justify-center items-center rounded-full shadow;
}
.searchResult {
    text-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset;
}
</style>
